<template>
  <div class="role">
    <el-container>
      <el-aside width="330px">
        <span class="role-title">角色列表</span>
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole">添加</el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="roleId === 0" @click="editRole">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="roleId === 0" @click="deleteRole">删除</el-button>
          <el-button type="primary" icon="el-icon-folder-checked" size="mini" :disabled="roleId === 0" @click="saveMenu">保存</el-button>
        </el-button-group>
        <el-radio-group v-model="roleId" class="role-group">
          <div class="role-list" v-for="item in roleList" :key="item.id">
            <el-radio :label="item.id" class="role-radio">{{item.title}}</el-radio>
          </div>
        </el-radio-group>
      </el-aside>
      <el-main>
        <span class="menu-title">菜单树</span>
        <el-tree
          v-loading="loading"
          :data="menuList"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps">
        </el-tree>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Role",
  data () {
    return {
      loading: false,
      roleId: 0,
      roleList: [],
      menuList: [],
      defaultProps: {
        children: 'subPermissionVos',
        label: 'title'
      }
    }
  },
  methods:{
    addRole () {
      this.$prompt('请输入角色名称', '添加角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '角色名称不能为空'
      }).then(({ value }) => {
        const roleBo = {
          title: value
        }
        this.$axios.post('/role/', roleBo).then(res => {
          if (res.code === 200) {
            this.loadRoleList()
          }
        })
      })
    },
    editRole() {
      const role = this.roleList.find(role => role.id === this.roleId)
      this.$prompt('请输入角色名称', '编辑角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '角色名称不能为空',
        inputValue: role.title
      }).then(({ value }) => {
        const roleBo = {
          title: value
        }
        this.$axios.put(`/role/${this.roleId}`, roleBo).then(res => {
          if (res.code === 200) {
            this.loadRoleList()
          }
        })
      })
    },
    deleteRole() {
      this.$confirm('确认删除?', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/role/${this.roleId}`).then(res => {
          if (res.code === 200) {
            this.loadRoleList()
          }
        })
      })
    },
    loadRoleList() {
      this.$axios.get('/role').then(res => {
        if (res.code === 200) {
          this.roleList = res.data
        }
      })
    },
    loadMenuTree() {
      this.loading = true
      this.$axios.get('/role/permission/tree').then(res => {
        this.loading = false
        if (res.code === 200) {
          this.menuList = res.data
        }
      })
    },
    saveMenu () {
      let permissionIds = []
      permissionIds = permissionIds.concat(this.$refs.tree.getCheckedKeys()).concat(this.$refs.tree.getHalfCheckedKeys())
      const rolePermissionBo = {
        permissionIds: permissionIds
      }
      this.$axios.put(`/role/permission/${this.roleId}`, rolePermissionBo)
    }
  },
  watch: {
    roleId (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$axios.get(`/role/permission/${newVal}`).then(res => {
          if (res.code === 200) {
            this.$refs.tree.setCheckedKeys(res.data)
          }
        })
      }
    }
  },
  mounted() {
    this.loadRoleList()
    this.loadMenuTree()
  }
}
</script>

<style lang="scss" scoped>
  .role {
    width: 100%;
    height: 100%;
    .el-container {
      height: 100%;
      width: 100%;
      .el-aside {
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        margin-right: 20px;
        padding: 20px;
        .role-title {
          display: block;
          height: 29px;
          width: 100%;
          text-align: center;
          line-height: 29px;
          font-weight: 100;
        }
        .role-group {
          box-sizing: border-box;
          width: 100%;
          margin-top: 10px;
        }
        .role-radio {
          padding: 5px;
          width: 100%;
          box-sizing: border-box;
          &:hover {
            background-color: #F5F7FA;
          }
        }
        .role-list {
          height: 100%;
          width: 100%;
          overflow: auto;
        }
      }
      .el-main {
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        overflow: auto;
        .menu-title {
          height: 29px;
          width: 100%;
          display: block;
          text-align: center;
          font-weight: 100;
        }
      }
    }
  }
</style>